<template>
  <view>
    <view class="flex-col justify-start relative page">
  <view class="flex-col justify-start relative section">
    <view class="section_2"></view>
    <view class="section_3 pos_3"></view>
    <view class="flex-col pos_4">
      <view class="flex-col section_4 list-item mt-3" v-for="(item, index) in items" :key="index">
        <text class="self-start font">小小科学家</text>
        <text class="self-stretch font_2 text_2 mt-7">
          它总是带着的“神奇百宝箱”，里面装满了各种有趣的科学小道具，通过趣味实验激发孩子们对科学的兴趣，教孩子用好奇的眼光看待世界。
        </text>
      </view>
    </view>
    <view class="flex-col justify-start section_7 pos_5">
      <view class="flex-col section_8">
        <text class="self-start font text_5">心灵导师</text>
        <text class="self-stretch font_2 text_6 mt-7">
          它温柔体贴，耐心倾听孩子们的心声，帮助他们找到内心的平静。它曾经也有过困惑和不安，但在心理导师的帮助下找到了自我，教会孩子们如何面对困难，保持积极乐观的心态。
        </text>
      </view>
    </view>
    <view class="flex-col justify-start section_9 pos_6">
      <view class="flex-col section_6">
        <text class="self-start font text_7">阅读领航员</text>
        <text class="self-stretch font_2 text_8 mt-7">
          它热爱读书，喜欢分享书籍中的智慧和乐趣，会根据孩子的兴趣推荐适合他们的读物。它曾经因为一本书改变了人生方向，所以非常重视阅读的力量，鼓励孩子们多读书，开拓视野。
        </text>
      </view>
    </view>
  </view>
  <view class="flex-col justify-start items-end image-wrapper pos">
    <image
      class="image"
      src="https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=b6d3f72187fca583ef828ff9bf6c4e74.png"
    />
  </view>
  <text class="text pos_2">角色设定样例</text>
</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        items: [null, null],
      };
    }
  }
</script>

<style lang="scss" scoped>
.mt-3 {
  margin-top: 6rpx;
}
.mt-7 {
  margin-top: 14rpx;
}
.page {
  padding-top: 478rpx;
  background-color: #fefff9;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-color: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=8f0021ff5df3b053ccb73db818b224d4.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_2 {
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=8f0021ff5df3b053ccb73db818b224d4.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 1146rpx;
}
.section_3 {
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=48ab803c8b680098393ce0e6a8665cad.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 184rpx;
}
.pos_3 {
  position: absolute;
  left: 33.56rpx;
  right: 34.44rpx;
  top: 252.46rpx;
}
.pos_4 {
  position: absolute;
  left: 31.42rpx;
  right: 32.58rpx;
  top: 274rpx;
}
.section_4 {
  margin: 0 8rpx;
  padding: 20rpx 12rpx 20rpx 24rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.font {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 26.58rpx;
  font-weight: 700;
  color: #333333;
}
.font_2 {
  font-size: 20rpx;
  font-family: Source Han Sans SC;
  line-height: 30rpx;
  color: #999999;
}
.text_2 {
  text-align: justify;
}
.section_6 {
  margin: 0 8rpx;
  padding: 20rpx 24rpx 16rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
}
.section_7 {
  padding: 24rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=fc6a499b925625e336b581d0b9a42f8b.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pos_5 {
  position: absolute;
  left: 32.44rpx;
  right: 33.56rpx;
  top: 648rpx;
}
.section_8 {
  margin: 0 8rpx;
  padding: 24rpx 24rpx 16rpx;
  background-color: #ffe944;
  border-radius: 24rpx;
}
.text_5 {
  line-height: 26.46rpx;
}
.text_6 {
  color: #666666;
  text-align: justify;
}
.section_9 {
  padding: 24rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=3c7a5e4dda0ca390638ac611205bc206.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pos_6 {
  position: absolute;
  left: 32.4rpx;
  right: 33.6rpx;
  top: 846rpx;
}
.text_7 {
  line-height: 26.82rpx;
}
.text_8 {
  text-align: justify;
}
.image-wrapper {
  padding: 64rpx 0 280rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=a53506307a8dbffca98bee63201fdcd5.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 344rpx;
}
.image {
  margin-right: 44rpx;
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
}
.text {
  color: #333333;
  font-size: 40rpx;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 38.32rpx;
}
.pos_2 {
  position: absolute;
  left: 33.8rpx;
  top: 683.6rpx;
}
</style>
    
      